<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鸡兔同笼</title>
    <style>
        .container{
            width: 60%;
            margin:0 auto;
            background-color: aqua;
            min-height: 220px;
        }
        h2{
            text-align: center;
            padding-top:10px;
        }
        p{
            width: 90%;
            margin:0 auto;
            text-align: center;
        }
        input{
            box-sizing: border-box;
            width: 60px;
        }
        #result{
            margin:20px auto;
            height:40px;
            width: 75%;
            padding:20px;
            border:1px dotted goldenrod;
            background-color: rgb(221,220,220);
            font-weight: bold;
            text-align:center;
        }
    

    </style>
</head>
<body>
    <div class="container" >
        <h2>循环解决鸡兔同笼问题</h2>
        <p>
            鸡兔同笼，鸡兔一共<input type="number" ">
            只。笼子里脚一共<input type="number" ">
            只，请问分别有多少只鸡和兔？<button>计算</button>
            
        </p>
        <div id="result" ></div>
    </div>

    <script>
        var input=document.querySelectorAll('input')
        var button=document.querySelector('button')
        var result=document.querySelector('#result')
        button.onclick=function(){
            result.style.cssText='color:red;'
            s='无解'
            for(i=0;i<=input[0].value && 4*i<=input[1].value;i++){
                if(4*i+2*(input[0].value-i)==input[1].value){
                    var j=input[0].value-i;
                    result.style.cssText='color:blue;'
                    s='分别有鸡:'+j+'只，有兔子'
                        +i+'只';
                }
            }
            result.innerHTML=s
        }
    </script>
</body>
</html>